<template>
	<view v-if="visible">
		<view class="pop-mask" @click="visible=false"></view>
		<picker-view :indicator-style="indicatorStyle" :value="intValue" @change="bindChange" class="picker-view">
			<picker-view-column>
				<view class="item" v-for="(item,index) in provList" :key="index">{{item.n}}</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in cityList" :key="index">{{item.n}}</view>
			</picker-view-column>
		</picker-view>
	</view>
</template>
<script>
import {cityArr} from '@/static/cityArr.js'   //路径根据导入项目后真实路径为准
    export default {
		props:{
			value:{
				type:Object,
				default:{
					
				}
			}
		},
        data: function () {
			const provList = [];
			const cityList = [];
			cityArr.filter(item=>{
				if(item.p==0){
					provList.push(item);
				}
			})
			cityArr.filter(item=>{
				if(item.p==provList[0].i){
					cityList.push(item);
				}
			})
			let prov = 0
			let city = 0
			let provName = provList[0].n
			let cityName = cityList[0].n
            return {
				provList,
				cityList,
				prov,
				city,
				provName,
				cityName,
                intValue: [0,0],
                visible: false,
                indicatorStyle: `height: 50px;`
            }
        },
		watch:{
			prov(v){
				this.cityList = []
				cityArr.filter(item=>{
					if(item.p==this.provList[v].i){
						this.cityList.push(item);
					}
				})
				this.prov = v
				this.intValue = [v,0]
				this.provName = this.provList[v].n
				this.cityName = this.cityList[0].n
				const result = {provName:this.provName , cityName :this.cityName, intValue:this.intValue }
				this.$emit("input",result);
			},
			city(v){
				this.intValue = [this.prov,v]
				this.cityName = this.cityList[v].n
				const result = {provName:this.provName , cityName :this.cityName,intValue:this.intValue }
				this.$emit("input",result);
			}
		},
        methods: {
			show(){
				this.visible = true
				console.log(this.value)
				this.intValue = this.value.intValue
			},
            bindChange: function (e) {
                const val = e.detail.value
				console.log(val)
				this.prov = val[0]
				this.city = val[1]
            }
        }
    }
</script>

<style lang="scss" scoped>
	.pop-mask{
		position: fixed;
		z-index: 8;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0,0,0,.4);
	}
			
	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
		position: absolute;
		z-index: 9;
		bottom: 0;
		background-color: #fff;
		border: solid 1rpx #dbdbdb;
		border-top-left-radius:30rpx ;
		border-top-right-radius:30rpx ;
		overflow: hidden;
	}
	.item {
		line-height: 100rpx;
		text-align: center;
		font-size: 34rpx;
	}
</style>